<template>
  <div>
    <h4>
      <img src="https://assets.maizuo.com/h5/mz-auth/public/app/img/logo.19ca0be.png" alt />
    </h4>
    <div class="body">
      <div>
        <input type="number" placeholder="请输入手机号" v-model="phonenum"/>
        <span @click="getsome">获取验证码</span>
      </div>
      <div>
        <input type="text" placeholder="输入验证码" v-model="text"/>
      </div>
    </div>
    <p class="land" @click="loadon">登陆</p>
  </div>
</template>
<script>
import { phone,smsCode } from "@/api";
import Cookies from 'js-cookie';
export default {
    data(){
        return{
            phonenum:'',
            text:'',
            msg:''
        }
    },
    methods:{
        getsome(){      //获取验证码    msg:错误时提示手机格式错误
            if(this.phonenum){
                phone(this.phonenum).then((resp)=>{
                    this.msg = resp.data.msg
                })
            }
        },  
        loadon(){ //登陆
            if(this.msg=='ok'&&this.text!=''){
                smsCode(this.phonenum,this.text).then((resp)=>{
                    Cookies.set('returnss', resp)
                    Cookies.set('mykeys',resp.data.data.token)
                    this.$route.push('/center')
                })
            }
            //不做验证
            this.$store.commit('changetoken',Cookies.get('mykeys'))
            this.$store.commit('changereturnss', JSON.parse(Cookies.get('returnss')))
            this.$router.push('/center')    //是否不验证跳转
        }
    },
    // created(){
    //         var a = Cookies.get('mykeys')
    //         var b = JSON.parse(Cookies.get('returnss'))
    //         console.log(
    //             a
    //         )
    //         console.log(
    //             b
    //         )
    //     }
};
</script>
<style  scoped>
h4 {
  height: 4rem;
  text-align: center;
  line-height: 4rem;
}
img {
  height: 1.2rem;
}
.body{
    width: 80%;
    margin:0 auto;
    padding:0rem 0 2.2rem 0;
}
.body div{
    margin:0.3rem 0;
    font-size: 0.2rem;
    line-height: 0.5rem;
}
.body div input,span{
    line-height: 0.4rem;
    border-radius: 0.1rem;
    outline: none;
    border:none;
}
.land {
  background: orange;
  width: 80%;
  margin: 0 auto;
  height: 0.8rem;
  border-radius: 0.2rem;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.4rem;
  color: white;
}
</style>